import React, { useRef } from "react";

export default function Useref() {
	// 创建Ref容器  绑定之后会获取到真实dom
	let input = useRef();
	let div = useRef();

	// 获取数据方法
	let getdata = () => {
		console.dir(input.current.value);
		// 向div真实dom赋值
		div.current.innerHTML = input.current.value;
		//清空input value
		input.current.value = "";
    };
    
	return (
		<>
			<h1>学习函数式组件 useRef() hook</h1>
			<input type="text" ref={input} />
			<button onClick={getdata}>获取数据</button>
			<div
				ref={div}
				style={{ width: "300px", height: "300px", border: "1px solid red" }}
			></div>
		</>
	);
}
